import type { FormInstance } from 'antd';
import { Form, Input, InputNumber, Switch } from 'antd';
import { useEffect, useMemo, useRef } from 'react';
import { modulesTypeList } from '@/pages/template/constants';
import type { DragItemType, FormValuesType } from '@/types/template';

interface DropItemFormPanelProps {
  editItem: DragItemType | null;
  onValuesChange: (
    changedValues: Partial<FormValuesType>,
    allValues: FormValuesType,
  ) => void;
}
export default function DropItemFormPanel({
  editItem,
  onValuesChange,
}: DropItemFormPanelProps) {
  const formRef = useRef<FormInstance>(null);
  const handleInitFormValues = (item: FormValuesType | null) => {
    if (item) {
      formRef.current?.setFieldsValue({
        ...item,
      });
    } else {
      formRef.current?.resetFields();
    }
  };
  // 无需展示的组件type
  const showTitle = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Photo', 'Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showEnTitle = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Photo', 'Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showValue = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showField = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showValueDesc = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['ENName', 'Address', 'Photo', 'Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showRegExp = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Photo', 'Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showRequired = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  const showMaxLength = useMemo(() => {
    const whichTypeShow = modulesTypeList.filter(
      (type) => !['Photo', 'Empty'].includes(type),
    );
    if (editItem?.type) {
      return whichTypeShow.includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  // 展示选项
  const showOptions = useMemo(() => {
    if (editItem?.type) {
      return ['Custom', 'Sex'].includes(editItem?.type);
    }
    return false;
  }, [editItem]);
  useEffect(() => {
    handleInitFormValues(editItem);
  }, [editItem]);
  return (
    <div className="section-item props-section">
      <Form ref={formRef} layout="vertical" onValuesChange={onValuesChange}>
        <Form.Item label="宽度" name="w">
          <InputNumber min={1} max={24} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item label="高度" name="h">
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        {showTitle && (
          <Form.Item label="标题" name="title">
            <Input />
          </Form.Item>
        )}
        {showEnTitle && (
          <Form.Item label="子标题" name="enTitle">
            <Input />
          </Form.Item>
        )}
        {showValue && (
          <Form.Item label="值" name="value">
            <Input />
          </Form.Item>
        )}
        {showValueDesc && (
          <Form.Item label="描述" name="valueDesc">
            <Input />
          </Form.Item>
        )}
        {showField && (
          <Form.Item label="字段名" name="field">
            <Input />
          </Form.Item>
        )}
        {showRegExp && (
          <Form.Item label="校验规则" name="regExp">
            <Input.TextArea rows={4} />
          </Form.Item>
        )}
        {showMaxLength && (
          <Form.Item
            label="最大长度"
            name="maxLength"
            tooltip="0或不填表示不限制长度"
          >
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
        )}
        {showRequired && (
          <Form.Item label="是否必填" name="required">
            <Switch checkedChildren="是" unCheckedChildren="否" />
          </Form.Item>
        )}
        {showOptions && (
          <Form.Item
            label="单选选项"
            name="options"
            tooltip="属性和值需要使用英文双引号包裹，选项之间用英文逗号隔开"
          >
            <Input.TextArea
              rows={8}
              placeholder='例:[{"label":"选项1","enLabel":"Select1","value":"1"}]'
            />
          </Form.Item>
        )}
      </Form>
    </div>
  );
}
